<template>
  <el-container>
    <el-header>
      <img src="../assets/images/logo.png" alt="" />
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#23262e"
        text-color="#fff"
        active-text-color="#409eff"
      >
        <el-submenu index="h1">
          <template slot="title"><el-avatar :src="$store.state.user.userInfo.user_pic"> </el-avatar>个人中心</template>
          <el-menu-item index="h1-1">基本资料</el-menu-item>
          <el-menu-item index="h1-2">更换头像</el-menu-item>
          <el-menu-item index="h1-3">重置密码</el-menu-item>
        </el-submenu>
        <el-menu-item index="h2">退出</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="s1"
          class="el-menu-vertical-demo"
          background-color="#23262e"
          text-color="#fff"
          active-text-color="#409eff"
          unique-opened
        >
          <el-menu-item>
            <el-avatar :src="$store.state.user.userInfo.user_pic"></el-avatar>
            <span>&nbsp;&nbsp;&nbsp;&nbsp; {{ $store.state.user.userInfo.nickname || '欢迎登录' }}</span>
          </el-menu-item>
          <el-menu-item index="s1">
            <i class="el-icon-setting"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="s2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="s2-1">
              <i class="el-icon-location"></i>
              <span>文章分类</span>
            </el-menu-item>
            <el-menu-item index="s2-2">
              <i class="el-icon-location"></i>
              <span>文章列表</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="s3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item index="s3-1">
              <i class="el-icon-location"></i>
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="s3-2">
              <i class="el-icon-location"></i>
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="s3-3">
              <i class="el-icon-location"></i>
              <span>重置密码</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { userinfoAPI } from '../axios/userinfoAPI.js'
export default {
  data() {
    return {}
  },
  async created() {
    // 获取用户信息
    const { data: res } = await userinfoAPI()
    // 将用户信息存到本地
    console.log(res)
    if (res.code === 0) {
      this.$store.commit('user/updataUserInfo', res.data)
    }
  }
}
</script>

<style lang="less">
.el-container {
  height: 100%;
  .el-header {
    background-color: #23262e;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-aside {
    background-color: #23262e;
  }
}
</style>
